<template>
  <view class="search-box">
    <my-search @click="toClickSearch"></my-search>
  </view>
  <view class="scroll-container-view">
    <view class="left-container-view" >
       <scroll-view class="left-scroll-view" scroll-y="true" :style="`height: ${wh}px`">
         <block v-for="(cateItem,index) in csteList" :key="cateItem.cat_id">
           <view
           :class="['left-scroll-item', index === onActive? 'active': '']" 
           @click="activeChange(index)"
           >
           {{cateItem.cat_name}}
           </view>
         </block>
         
       </scroll-view>
    </view>
    <view class="right-container-view">
      <scroll-view scroll-y="true" :style="`height: ${wh}px`">
        <view class="right-scroll-item" v-for="(wtoCateItems, index) in twoCateList" :key="wtoCateItems.cat_id">
          <view class="cate-title">
            {{wtoCateItems.cat_name}}
          </view>
          <view class="cheek"></view>
          <view class="wto-item-info">
            <view 
            class="wto-item" 
            v-for="(wtoItem,index) in wtoCateItems.children" 
            :key="wtoItem.cat_id" 
            @click="gotoGoodsList(wtoItem.cat_id)">
              <image class="wto-item-image" :src="wtoItem.cat_icon" mode=""></image>
              <text>{{wtoItem.cat_name}}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
   import {ref, onBeforeMount} from 'vue'
   const onActive = ref(0)
   // const scrollTop = ref(1)
   const wh = ref(0) // 存储系统屏幕高度
   onBeforeMount(() => {
     // 获取当前系统的信息
     const synInfo = uni.getSystemInfoSync()
     wh.value = synInfo.windowHeight - 40
     
     getCateList()
   })
   
   const csteList = ref([]) // 存储分类数据
   const twoCateList = ref([]) // 存储二级分类数据
   const getCateList = async (index = 0) => {
     const {data} = await uni.$http.get('/api/public/v1/categories')
     console.log(data);
     if(data.meta.status !== 200) uni.$showMsg()
     csteList.value = data.message
     twoCateList.value = data.message[index].children
   }
   const activeChange = (index) => {
     onActive.value = index
     getCateList(index)
     // console.log(scrollTop.value);
   }
   const gotoGoodsList = (id) => {
     uni.navigateTo({
       url: '/subpkg/goods_list/goods_list?cid=' + id
     })
   }
   
   const toClickSearch = () => {
     uni.navigateTo({
       url: '/subpkg/search/search'
     })
   }
</script>

<style lang="scss">
  .search-box {
    position: sticky;
    top: 0;
    z-index: 1111;
  }
   .scroll-container-view {
     display: flex;
     .left-scroll-view {
       width: 220rpx;
       .left-scroll-item {
         line-height: 120rpx;
         background-color: #f7f7f7;
         text-align: center;
         font-size: 30rpx;
         &.active {
           background-color: #fff;
           position: relative;
           &::before {
             content: '';
             display: blick;
             width: 6rpx;
             height: 60rpx;
             background-color: #44cd8c;
             position: absolute;
             left: 0;
             top: 50%;
             transform: translateY(-50%);
           }
         }
         
       }
     }
     .right-scroll-item {
       display: flex;
       flex-direction: column;
       align-items: center;
       margin-bottom: 20rpx;
       .cheek {
         height: 2rpx;
         width: 200rpx;
         background-color: #999;
         border-radius: 100%;
         
       }
       .cate-title {
         font-size: 35rpx;
         text-align: center;
         height: 100rpx;
         line-height:  100rpx;
       }
       .wto-item-info {
         display: flex;
         flex-wrap: wrap;
         .wto-item {
           display: flex;
           align-items: center;
           flex-direction: column;
           width: 33.33%;
           margin: 10rpx 0;
           .wto-item-image {
            width: 60px;
            height: 60px;
            }
         }
       }
     }
   }
</style>
